<template>
	<view class="content">
		<view class="top_bar" style="background: rgba(244,244,244,0.96);; border-bottom:1rpx solid #b5b5b5;"  >
			<view @click="toUserDtetail" class="top_bar_left">
				<image :src="userinfo.userimg" mode=""></image>
			</view>
			<view class="top_bar_index"  @click="mandatoryLogout">
				<image src="../../static/applogo.png" ></image>
			</view>
			<view class="top_bar_right">
				<image @click="toSearch" src="../../static/image/index/search.png" mode=""></image>
				<image @click="toBuildGroup" src="../../static/image/index/plass.png" mode=""></image>
			</view>
		</view>
		<view class="apply">
			<view class="apply_item" @click="toApplications" >
				<view class="item_image">
					<image src="../../static/image/index/application.png" mode=""></image>
					<!-- <view class="news" v-if='item.tip'>
						{{ item.tip }}
					</view> -->
				</view>
				<view class="item_data" >
					<view class="data_name">
						好友申请
					</view>
					<view class="data_main">
						请求加为好友
					</view>
					<view class="data_date">
						刚刚
					</view>
				</view>
			</view>
			<view class="apply_item" v-for="(item,index) in message" @click="toChatroom(item)" >
				<view class="item_image">
					<image :src="item.userimg" mode=""></image>
					<view class="news" v-if='item.tip!="0"'>
						{{ item.tip }}
					</view>
					<view v-if='item.group' class="group-show"></view>
				</view>
				<view class="item_data" >
					<view class="data_name">
						{{ item.username }}
					</view>
					<view class="data_main">
						{{ item.new_data }}
					</view>
					<view class="data_date">
						{{ item.datetime }}
					</view>
				</view>
			</view>
		</view>
		
		
	</view>
	
</template>

<script>
	import data1  from '../../commons/js/dateformat.js'
	import request from '../../utails/request.js'
	import {checkUser} from '../../utails/check_user.js'
	
	export default {
		data() {
			return {
				userinfo:{},
				message: [],
				tips:{} // 记录新消息的未读数量
			}
		},
		onLoad() {
			this.onSocket()
			this.groupsocket()
			
			// 强制下线
			this.socket.on('logout',(uId)=>{
				console.log(`用户：${uId}强制下线`);
				
			})
		},
		onShow() {
			setTimeout(()=>{
				this.getFields()
			},10)
		},
		methods: {
		async getFields(){
				// 校验用户信息
				// let r = await checkUser()
				this.userinfo = uni.getStorageSync('userinfo')||undefined
				if(!this.userinfo){
					return uni.navigateTo({
						url:'/pages/login/login'
					})
				}
				
				// 请求数据
				let res = await request.request({url:'/index/',data:{userid:this.userinfo.id}})
				this.message = [...res.groups, ...res.users]
				
				// 加用户添加到join()
				if(res.groups){
					res.groups.forEach(v=>{
						this.socket.emit('group',v.id)
					})
				}
			
				// 处理时间数据
				this.message.forEach((v,i)=>{
					v.datetime = data1.format3(v.datetime)
					if(v.tip>=99){
						v.tip=99
					}
				})
				this.join()
			},
			// Socket.io
			join(){
				console.log(`join`);
				// 在socket 记录用户
				this.socket.emit('login',this.userinfo.id)
				
				
			},
			// 接收群消息
			groupsocket(){
				this.socket.on('groupMsgs',(msg, gid)=>{
					// 内容类型处理
					this.pushSocketData(msg, gid)
				})
			},
			// 接收socket消息
			onSocket(){
				// 首页最新消息
				this.socket.on('index',(msg,fid)=>{
					this.pushSocketData(msg, fid)
				})
				
			},
			// 对socket处理
			pushSocketData(msg,id){
				// 内容类型处理
				if(msg.types==1){
					msg.message = '(图片)'
				}else if(msg.types==2){
					msg.message = '(语音)'
				}
				
				this.message.forEach((v,i)=>{
					console.log(v.id)
					if(v.id==id){
						v.new_data = msg.message
						v.datetime = msg.time
						v.tip++
						if(v.tip>=99){
							v.tip=99
						}
						// 实现最新置顶 
						this.message.splice(0,0,v)
						this.message.splice(i+1,1)
					}
				})
			},
			
			// 跳转到搜索页面
			toSearch(){
				uni.navigateTo({
					url:'/pages/search/search'
				})
			},
			// 跳转到建群页面
			toBuildGroup(){
				uni.navigateTo({
					url:'/pages/buildgroup/buildgroup'
				})
			},
			// 进入聊天界面
			toChatroom(itme){
				console.log(itme.id)
				if(itme.group==1){
					uni.navigateTo({
						url:`../chatroom/chatroom?id=${itme.id}&group=1`,
						animationType: 'slide-in-right',
						animationDuration: 600,
						success() {
						
						}
					})
				}else{
					uni.navigateTo({
						url:`/pages/chatroom/chatroom?id=${itme.id}`
					})
				}
			},
			// 跳转至用户详情页
			toUserDtetail(){
				uni.navigateTo({
					url:'../userdetials/userdetials'
				})
			},
			
			// 跳转到好友申请界面
			toApplications(){
				uni.navigateTo({
					url:'../friendrequest/friendrequest'
				})
			},
			
			// 跳转到个人中心
			toUserInfo(){
				uni.navigateTo({
					url:'/pages/user/user'
				})
			},
			
			
			// 强制下线
			mandatoryLogout(){
				uni.showModal({
					title:'该账号在异地登录，请重新登录',
					showCancel: false, // 关键设置，隐藏取消按钮
					success:(res)=>{
						if(res.confirm){
							// 用户确定退出
							uni.removeStorageSync('userinfo')
							uni.redirectTo({
								url:'../login/login',
							})
						}
					}
				})
			}
			
			
		}
	}
</script>

<style>
	/* 头部 */
	@import "../../commons/css/myss.scss";
	
	
		
	/* 聊天区域 */
	.apply{
		position: absolute;
		top: 88rpx;
		left: 20rpx;
		display: flex;
		flex-direction: column;
	}
	.apply_item{
		flex: 1;
	}
	.item_image{
		float: left;
		padding: 15rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
	}
	.item_image image{
		height: 90rpx;
		width: 90rpx;
		border-radius: 30%;
		/* 防止图片显示不出来 */
		background-color: #f4ea2a;
	}
	/* 新消息提示 */
	.item_image .news{
		position: absolute;
		top:5rpx;
		right: 5rpx;
		height: 35rpx;
		width: 35rpx;
		background-color: red;
		font-size: 16rpx;
		text-align: center;
		line-height: 35rpx;
		color: white;
		border-radius: 16rpx;
	}
	
	.item_data{
		/* float: left;
		width: 540rpx; */
		margin-left: 120rpx;
		width: 75vw;
		padding: 0 15rpx;
		padding-top: 25rpx;
		position: relative;
		
	}
	.data_name{
		
	}
	.data_main{
		font-size: 26rpx;
		color: #808080;
	    display: -webkit-box;
		overflow: hidden; 
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
	}
	.data_date{
		position: absolute;
		right: 5rpx;
		top:25rpx;
		font-size: 16rpx;
	}
	
	/* 请求添加好友 */
	#application{
		height: 60rpx;
		width: 60rpx;
	}
	
	/* 群特有图标 */
	.group-show{
		position: absolute;
		bottom: 16rpx;
		right: 14rpx;
		width: 16rpx;
		height: 16rpx;
		border-radius: 8rpx;
		opacity: 0.8;
		background-color: #f4ea2a;
		box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.2);
		z-index: 100;
	}
	
</style>
